<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <!-- <nav class="nav_0320">
        <span :class="{'active_0320': select}" @click="changeSelect(true)">语音</span>
        <span :class="{'active_0320': !select}" @click="changeSelect(false)">视频</span>
      </nav> -->
      <div class="content_0320">
        <div class="uploadW_0320">
          <div class="icon_0320" :class="{'icon_0320_2': !select}"></div>
          <div class="infoW_0320">
            <h2 class="title_0320">{{select? '上传音频':'上传视频'}}</h2>
            <p class="info_0320">我们支持MP3, WMA，AIFF，AIF, WAV, FLAC, OGG, MP2, AAC，AMR等文件格式，文件≤5M，请尽量上传高音质音频</p>
          </div>
        </div>
         <input type="text" class="intoTitle_0320" placeholder="请输入标题（20字内）">
         <textarea class="textarea_0320" placeholder="详细说明（300字内）"></textarea>
         <p class="aboutP_0320">适合哪类人群(1-6个)</p>
         <div class="labelsW_0320">
           <span>高级技师</span>
           <span>全栈工程师</span>
           <span>JAVAScript</span>
           <span>IT</span>
           <span>前端</span>
           <span>后台</span>
           <span>添加标签+</span>
         </div>
      </div>
      <div class="intoMoney_0320">定价 <input type="number" placeholder="金额输入"></div>
      <myButton  class="marginB_04" @clickBtn="clickBtn">提交</myButton>
    </main>
  </section>
  
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
export default {
  data () {
    return {
      myObj: {
        text: '内容发布',
        type: 4
      },
      select: true,
    }
  },
  methods: {
    events(i) {
      if(i ==2) {
        history.back();
      }
    },
    changeSelect(status) {
      this.select = status;
    },
    clickBtn(){
      console.log('提交');
    }
  },
  components: {
    myHeader,
    myButton
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    width: 100%;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    .marginB_04 {
      margin-bottom:.44rem;
    }
    .intoMoney_0320 {
      width: 100%;
      height: .44rem;
      background: white;
      display: flex;
      padding: 0 .15rem;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      font-size: .17rem;
      color: #000000;
      line-height: .44rem;
      font-weight: 500;
      margin-bottom: .28rem;
      input {
        width: 2.7rem;
        height: .44rem;
        border: none;
        font-size: .17rem;
        color: #ADADAD;
      }
    }
    .content_0320 {
      padding: .36rem .15rem 0;
      background: white;
      margin-bottom: .04rem;
      .labelsW_0320 {
        overflow: hidden;
        span {
          display: block;
          height: .3rem;
          line-height: .3rem;
          float: left;
          margin: 0 .15rem .1rem 0;
          padding: 0 .1rem;
          background: #828282;
          font-size: .14rem;
          color: white;
          border-radius: .04rem;
        }
      }
      .aboutP_0320 {
        color: #353535;
        font-size: .14rem;
        padding-bottom: .08rem;
        
      }
      .textarea_0320 {
        width: 3.43rem;
        height: 2.18rem;
        font-size: .14rem;
        color: #ADADAD;
        border: .01rem solid #D8D8D8;
        border-radius: .03rem;
        padding: .12rem .15rem;
        box-sizing: border-box;
        margin-bottom: .21rem;

      }
      .intoTitle_0320 {
        width: 3.43rem;
        height: .28rem;
        color: #ADADAD;
        font-size: .14rem;
        border: .01rem solid #D8D8D8;
        border-radius: .03rem;
        padding: 0 .15rem;
        box-sizing: border-box;
        margin-bottom: .15rem;
      }
      .uploadW_0320 {
        width: 3.45rem;
        display: flex;
        justify-content: space-between;
        padding-bottom: .22rem;
        .icon_0320 {
          width: .73rem;
          height: .73rem;
          background: url('../assets/img/expert/icon_language-max@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .icon_0320_2 {
          background: url('../assets/img/expert/icon_vido@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .infoW_0320 {
          width: 2.46rem;
          .title_0320 {
            color: #39393D;
            font-size: .14rem;
            font-weight: 500;
            padding-bottom: .08rem;
          }
          .info_0320 {
            font-size: .12rem;
            line-height: .16rem;
            color: #888888;
          }
        }

      }

    }
    .nav_0320 {
      width: 100%;
      height: .45rem;
      padding: 0 .73rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      background: white;
      margin: .1rem auto .09rem;
      span {
        display: block;
        width: .7rem;
        height: .42rem;
        line-height: .42rem;
        text-align: center;
        font-size: .14rem;
        color: #828282;
        border-bottom: .04rem solid white;
        &.active_0320 {
          color: #557AFF;
          border-bottom-color: #557AFF;
        }
      }
    }
  }
}
</style>

